<template>
	<view class="app-discuss__item e-p-30 bg-white"
		:class="[imgs.length === 1 ? 'app-discuss__item--layout1' : 'app-discuss__item--layout2' ]" @tap="$goTo('/pages/user/discuss/info',{id:info.id})">
		<view class="app-discuss__item-title e-font-32 e-line-2">
			{{info.title}}
		</view>
		<view class="e-flex">
			<view class="app-discuss__item-img" v-for="(item,index) in imgs" :key="index">
				<load-image mode="aspectFill" :size="['200rpx']"  :src="item">
				</load-image>
			</view>
		</view>
		<view class="app-discuss__item-time e-flex e-font-22">
			<view class="e-m-r-32">
				<text>{{info.likeNumber || 0}}{{$t('discuss.like')}}</text>
			</view>
			<view class="">
				<text>{{time}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
			timeFormat
		} from '@/common/utils'
	export default {
		props: {
			info: Object
		},
		computed: {
			imgs() {
				if (this.info.images) {
					return this.info.images.split(',')
				}
				return []
			},
			time () {
				if(this.info.createTime){
					return  timeFrom(new Date(this.info.createTime).getTime()).replace(/刚刚/, this.$t('discuss.刚刚')).replace(/分钟前/, this.$t('discuss.分钟前')).replace(/小时前/, this.$t('discuss.小时前')).replace(/天前/, this.$t('discuss.天前'));
				}
				return ''
			}
		}
	}
</script>

<style lang="scss" scoped>
	.app-discuss__item {
		padding: 32rpx 28rpx;

		&--layout1 {
			display: flex;
			position: relative;
			.app-discuss__item-title {
				width: calc(100% - 220rpx);
				flex: 0 0 calc(100% - 220rpx);
			}
			.app-discuss__item-time{
				position: absolute;
				left: 30rpx;
				bottom: 30rpx;
			}
			
		}
		&--layout2 {
			.app-discuss__item-title {
				margin-bottom: 32rpx;
			}
			.app-discuss__item-img{
				margin: 0 20rpx 20rpx 0;
				&:nth-child(3n){
					margin-right: 0;
				}
			}
		}

		&-time {
			color: #929292;
		}
		&-img{
			flex: 0 0 200rpx;
			width: 200rpx;
			height: 200rpx;
		}
	}
</style>
